
<template>
  <div class="footer">
    <div class="svg-btn" @click="toggleCall">
      <svg
        v-if="!calling"
        t="1758602132976"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5192"
        width="55"
        height="55">
        <path
          d="M480 64C214.912 64 0 278.912 0 544 0 809.152 214.912 1024 480 1024c265.152 0 480-214.848 480-480C960 278.912 745.152 64 480 64zM670.016 698.304C661.568 726.4 624.64 768 590.848 768L588.672 768c-51.2-2.688-120.384-53.44-185.088-135.488L379.776 602.304c-64.704-82.048-98.56-162.304-90.624-214.464C294.72 351.04 346.816 320 376.64 320c14.656 0 20.032 7.616 21.888 12.224 16.768 31.488 37.632 86.208 37.824 105.792l0 1.344L435.84 440.768C432.064 451.072 423.808 456 416.448 460.352 406.72 466.112 401.28 469.888 400.576 480.768c-0.128 3.264 2.56 18.24 45.184 73.408L464 577.344C506.816 630.4 520.256 636.032 523.392 636.48 533.696 638.08 538.624 633.344 545.984 624.832 551.616 618.176 558.08 610.88 568.64 609.28l1.344-0.256 1.28 0.448c18.688 4.032 66.304 36.224 93.44 60.224C668.544 672.384 675.392 680.512 670.016 698.304z"
          fill="#07c160"
          p-id="5193"></path>
      </svg>
      <svg
        v-else
        t="1758602132976"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5192"
        width="55"
        height="55">
        <path
          d="M480 64C214.912 64 0 278.912 0 544 0 809.152 214.912 1024 480 1024c265.152 0 480-214.848 480-480C960 278.912 745.152 64 480 64zM670.016 698.304C661.568 726.4 624.64 768 590.848 768L588.672 768c-51.2-2.688-120.384-53.44-185.088-135.488L379.776 602.304c-64.704-82.048-98.56-162.304-90.624-214.464C294.72 351.04 346.816 320 376.64 320c14.656 0 20.032 7.616 21.888 12.224 16.768 31.488 37.632 86.208 37.824 105.792l0 1.344L435.84 440.768C432.064 451.072 423.808 456 416.448 460.352 406.72 466.112 401.28 469.888 400.576 480.768c-0.128 3.264 2.56 18.24 45.184 73.408L464 577.344C506.816 630.4 520.256 636.032 523.392 636.48 533.696 638.08 538.624 633.344 545.984 624.832 551.616 618.176 558.08 610.88 568.64 609.28l1.344-0.256 1.28 0.448c18.688 4.032 66.304 36.224 93.44 60.224C668.544 672.384 675.392 680.512 670.016 698.304z"
          fill="#d81e06"
          p-id="5193"></path>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import { playButtonSound } from '@/utils/sound';

const calling = ref(false);
const emit = defineEmits(['callStatus']);

function toggleCall() {
  // 播放按钮音效
  playButtonSound();
  calling.value = !calling.value;
  emit('callStatus', calling.value);
}
</script>

<style scoped>
.footer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.svg-btn {
  cursor: pointer;
  border-radius: 50%;
  width: 80px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>